<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 符号处理改进</title>
    <style>
        body {
            font-family: Arial, "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1, h2 {
            color: #333;
        }
        .example {
            background-color: #f5f5f5;
            padding: 15px;
            border-left: 4px solid #3498db;
            margin: 15px 0;
        }
        code {
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            background-color: #eee;
            padding: 2px 4px;
            border-radius: 3px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>HTML5 针对符号处理的改进</h1>
    
    <h2>1. 实体字符基础</h2>
    <p>
        实体字符是指在HTML中用于表示特殊字符的代码。
        例如，< 小于号，> 大于号，& 与号，" 双引号，' 单引号等。
    </p>
    
    <div class="example">
        <h3>基本实体字符示例：</h3>
        <table>
            <tr>
                <th>字符</th>
                <th>实体名称</th>
                <th>实体编号</th>
                <th>显示效果</th>
            </tr>
            <tr>
                <td>小于号</td>
                <td>&amp;lt;</td>
                <td>&amp;#60;</td>
                <td>&lt;</td>
            </tr>
            <tr>
                <td>大于号</td>
                <td>&amp;gt;</td>
                <td>&amp;#62;</td>
                <td>&gt;</td>
            </tr>
            <tr>
                <td>与号</td>
                <td>&amp;amp;</td>
                <td>&amp;#38;</td>
                <td>&amp;</td>
            </tr>
            <tr>
                <td>双引号</td>
                <td>&amp;quot;</td>
                <td>&amp;#34;</td>
                <td>&quot;</td>
            </tr>
            <tr>
                <td>单引号</td>
                <td>&amp;apos;</td>
                <td>&amp;#39;</td>
                <td>&apos;</td>
            </tr>
        </table>
    </div>
    
    <h2>2. HTML5 的改进</h2>
    
    <h3>2.1 更好的 UTF-8 支持</h3>
    <p>
        HTML5 强调使用 UTF-8 编码，这使得网页可以直接显示世界上几乎所有语言的字符，无需使用实体字符。
        通过在 meta 标签中设置 <code>&lt;meta charset="UTF-8"&gt;</code>，浏览器可以正确解析和显示各种字符。
    </p>
    
    <div class="example">
        <h3>UTF-8 直接显示多语言字符：</h3>
        <p>英语：Hello World!</p>
        <p>中文：你好，世界！</p>
        <p>日语：こんにちは、世界！</p>
        <p>阿拉伯语：مرحبا بالعالم!</p>
        <p>俄语：Привет, мир!</p>
    </div>
    
    <h3>2.2 减少了对实体字符的依赖</h3>
    <p>
        HTML5 放宽了对某些上下文中小于号等字符的限制，但为了代码的一致性和避免潜在问题，
        仍然建议在HTML中正确使用实体字符，特别是在属性值和文本内容中。
    </p>
    
    <h3>2.3 自定义数据属性</h3>
    <p>
        HTML5 引入了 <code>data-*</code> 属性，允许开发者在HTML元素上存储自定义数据。
        这些属性可以包含各种字符，为数据交换提供了方便的方式。
    </p>
    
    <div class="example">
        <h3>自定义数据属性示例：</h3>
        <pre><code>&lt;div data-user-info="{\"name\": \"张三\", \"age\": 25}"&gt;用户信息&lt;/div&gt;</code></pre>
    </div>
    
    <h3>2.4 更严格的语法检查</h3>
    <p>
        HTML5 有更严格的语法规则，确保实体字符的正确使用，减少了解析错误。
    </p>
    
    <h2>3. 最佳实践</h2>
    <ul>
        <li>始终在文档头部设置正确的字符编码：<code>&lt;meta charset="UTF-8"&gt;</code></li>
        <li>在 HTML 内容中正确使用实体字符，特别是 &lt;, &gt;, &amp;, ", '</li>
        <li>对于特殊符号和数学符号，可以使用对应的实体字符或直接使用 UTF-8 字符</li>
        <li>在 JavaScript 和 CSS 中注意字符转义的不同规则</li>
    </ul>
    
    <h2>4. 数学和特殊符号</h2>
    <p>
        HTML5 支持大量的数学符号、货币符号和其他特殊符号，可以通过实体字符或直接使用 UTF-8 字符来显示。
    </p>
    
    <div class="example">
        <h3>常用特殊符号示例：</h3>
        <table>
            <tr>
                <th>符号</th>
                <th>实体名称</th>
                <th>含义</th>
            </tr>
            <tr>
                <td>&copy;</td>
                <td>&amp;copy;</td>
                <td>版权符号</td>
            </tr>
            <tr>
                <td>&reg;</td>
                <td>&amp;reg;</td>
                <td>注册商标</td>
            </tr>
            <tr>
                <td>&trade;</td>
                <td>&amp;trade;</td>
                <td>商标符号</td>
            </tr>
            <tr>
                <td>&euro;</td>
                <td>&amp;euro;</td>
                <td>欧元符号</td>
            </tr>
            <tr>
                <td>&pound;</td>
                <td>&amp;pound;</td>
                <td>英镑符号</td>
            </tr>
            <tr>
                <td>&yen;</td>
                <td>&amp;yen;</td>
                <td>日元符号</td>
            </tr>
        </table>
    </div>
</body>
</html>
